<template>
    <a-layout style="height: 100%">
        <a-layout-sider v-model:collapsed="collapsed" collapsible :width="266" :trigger="null" class="layout-sider">
            <div class="logo">
                <div @click="toHome"><img src="@/assets/images/logo-web.png" /> <span v-if="!collapsed" 
                style="margin-left: 15px;"
                >新站群运营端</span></div>
            </div>
            <a-menu
                v-model:selectedKeys="menuSelectedKeys"
                @openChange="openChange"
                v-model:openKeys="menuOpenKeys"
                @click="handleClick"
                mode="inline"
                class="menu"
                :theme="$store.theme"
                :style="menuStyle"
            >
                <Menu :data="menuData"></Menu>
            </a-menu>
        </a-layout-sider>
        <a-layout style="height: 100%">
            <a-layout-header style="background: #fff; border-bottom: 1px solid #dedede; padding-left: 0">
                <a-row type="flex" align="middle" justify="space-between">
                    <a-col>
                        <menu-unfold-outlined v-if="collapsed" class="trigger" @click="() => (collapsed = !collapsed)" />
                        <menu-fold-outlined v-else class="trigger" @click="() => (collapsed = !collapsed)" />
                        <a-breadcrumb style="display:inline-block;">
                            <a-breadcrumb-item v-for="item in breadcrumbItems" style="user-select: none">
                                {{item.label}}
                            </a-breadcrumb-item>
                        </a-breadcrumb>
                    </a-col>
                    <a-col style="display: flex; align-items: center">
                        <a-flex>
                            <a-tooltip title="刷新清除缓存">
                                <div class="icon-div">
                                    <a-button :type="reloadType" @click="reload">
                                        <template #icon>
                                            <reload-outlined :spin="reloadSpin" />
                                        </template>
                                    </a-button>
                                </div>
                            </a-tooltip>
                            <div class="icon-div">
                                <SettingOutlined class="setting" @click="() => (openGloablSettingDrawer = true)" />
                            </div>
                        </a-flex>
                        <a-avatar
                            shape="square"
                            :size="50"
                            :style="{ backgroundColor: avatarColor, verticalAlign: 'middle', userSelect: 'none' }"
                        >
                            {{ $store.author }}
                        </a-avatar>
                        <a-button type="link" @click="backLogin">退出</a-button>
                    </a-col>
                </a-row>
                <Setting v-model:visible="openGloablSettingDrawer" />
            </a-layout-header>
            <div style=" overflow-y: auto;">
                <OutsideLink />
                <div class="router-view-parent">
                    <router-view></router-view>
                </div>
            </div>
            <a-layout-footer :style="{ textAlign: 'center' }"> 八斗信息技术有限公司 ©2022 Created by Ant Lcw </a-layout-footer>
        </a-layout>
    </a-layout>
 
</template>

<script lang="ts" setup name="home">
    import { useWindowSize, watchDebounced } from "@vueuse/core";
    import Menu from "@/components/Menu.vue";
    import { last } from "@/utils/lodash";
    import type { MenuProps } from "ant-design-vue";
    import { MenuFoldOutlined, MenuUnfoldOutlined, ReloadOutlined, SettingOutlined } from "@ant-design/icons-vue";
    import mainStore from "@/stores/main";
    import { backLogin, clearCache } from "@/utils/common";
    import { skipOutsideKey } from "@/assets/ts/menuData";
    import OutsideLink from "@/components/OutsideLink.vue";
    import Setting from "@/components/Setting.vue";
    const menuSelectedKeys = ref<Array<string>>([]);
    const menuOpenKeys = ref<Array<string>>([]);
    const openGloablSettingDrawer = ref(false);
    const menuKeyPaths = ref<Array<string>>([])
    const breadcrumbItems = computed(()=>{
        const items:SelectOption = []
        menuKeyPaths.value.reduce((p,c)=>{
            const menuItem = p.find(item=>item.key === c)
            if(menuItem){
                items.push({label:menuItem.title,value:menuItem.key})
                if(menuItem.children){
                    return menuItem.children 
                }
            }
            return p
        },menuData.value)
        return items
    })
    const $store = mainStore();
    $store.getUserInfo().then($store.setNewMenuData);
    const { menuKeys, menuData } = toRefs($store);
    const $router = useRouter();
    const handleClick: MenuProps["onClick"] = (item) => {
        for (const item2 of skipOutsideKey) {
            if (item2.key === item.key) {
                window.open(item2.href);
                return;
            }
        }
        menuKeyPaths.value = item.keyPath as Array<string>
        menuSelectedKeys.value = [last(item.keyPath as Array<string>) as string];
        $router.push({
            name: item.key as string
        });
    };
    // 控制侧边栏是否收起
    const collapsed = ref<boolean>(false);
    const $route = useRoute();
    const initMenuSelectAndOpenKeys = () => {
        // 当前路由的绝对路径(包含父路由所以信息)
        $route.matched.forEach((item) => {
            if (item.path !== "/") {
                if (menuKeys.value.includes(item.name as string)) {
                    menuSelectedKeys.value = [item.name as string];
                }
                const paths = item.path.split("/").filter(Boolean);
                menuOpenKeys.value = paths.slice(0, paths.length - 1);
            }
        });
        menuKeyPaths.value = [...menuOpenKeys.value,...menuSelectedKeys.value]
    };
    const openChange = (openKeys: any) => {
        menuOpenKeys.value = openKeys;
    };
    // router-view 父盒子样式
    const { width } = useWindowSize();
    // 当宽度小于多少 就关闭侧边栏
    const watchWidthFn = () => {
        if (width.value < 1350) {
            collapsed.value = true;
        }
    };
    const avatarColor = computed(() => {
        return "#" + Math.random().toString(16).slice(2, 8);
    });

    watchDebounced(width, watchWidthFn, { debounce: 500 });
    const reloadSpin = ref(false);
    const reloadType = computed(() => {
        return reloadSpin.value ? "link" : "text";
    });
    // 页面刷新 清除缓存
    const reload = () => {
        reloadSpin.value = true;
        clearCache();
        $router.push({
            path: `/blank-space`,
            query: {
                redirect: $route.fullPath
            }
        });
    };
    const menuStyle = computed(() => ({
        height: window.innerHeight - 80 + "px"
    }));
    onMounted(() => {
        if (!$store.username) {
            backLogin();
            return;
        }
        initMenuSelectAndOpenKeys();
    });
    const toHome = ()=>{
        $router.push({
            path: `/`,
        });
    }
</script>

<style lang="scss" scoped>
    @import "@/assets/css/transition.scss";
    .trigger {
        font-size: 18px;
        line-height: 64px;
        padding: 0 24px;
        cursor: pointer;
        transition: color 0.3s;
    }
    .trigger:hover {
        color: #1890ff;
    }

    .site-layout .site-layout-background {
        background: #fff;
    }

    ::v-deep(.ant-menu-item) {
        height: 46px !important;
        font-size: 14px;
        user-select: none;
    }

    ::v-deep(.ant-card-body) {
        padding: 10px;
    }

    .layout-sider {
        background-color: #fff;
        border-right: 1px solid #cfcfcf;
    }

    .router-view-parent {
        overflow-x: hidden;
        overflow-y:hidden;
        margin: 10px 16px; 
    }
    .menu {
        overflow: auto;
        &::-webkit-scrollbar {
            /* 竖置滚动条 宽度 */
            width: 0px;
            /* 横置滚动条 高度 */
            height: 0px;
        }
    }
    [data-theme="dark"] .ant-layout-sider{
        background: #001529 !important;
    }
    [data-theme="dark"] .logo {
        background: #001529 !important;
        color: #fff !important;
    }
    .ant-layout{
        background-color: none;
    }
    .logo {
        margin-right: 2px;
        div {
            cursor: pointer;
            width: 100%;
            height: 64px;
            line-height: 64px;
            text-align: center;
            font-size: 22px;
            user-select: none;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        img {
            width: 56px;
            height: 56px;
        }
    }
    .icon-div {
        height: 34px;
        width: 34px;
        margin-right: 17px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 17px;
    }
</style>
